<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/rule">菜单列表</a></el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card" style="margin-top: 15px">
      <el-button type="success" size="medium" @click="add()">新增</el-button>
      <el-table :data="tableData" style="width: 100%;margin-top: 15px">
        <el-table-column
            prop="id"
            label="id">
        </el-table-column>
        <el-table-column
            prop="name"
            label="菜单名称">
        </el-table-column>
        <el-table-column
            prop="img"
            label="图标">
        </el-table-column>
        <el-table-column
            prop="url"
            label="url路由">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态">
          {{ tableData.status === 1 ? "正常" : "禁用" }}
        </el-table-column>
        <el-table-column
            prop="create_time"
            label="日期">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--              {{scope.row}}}-->
            <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 10, 15, 50]"
          :page-size="param.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

      <!--        添加的表单-->
      <el-dialog
          title="添加"
          :visible.sync="addDialogdialogVisible"
          width="30%">
        <el-form ref="form" :model="addForm" label-width="80px">
          <el-form-item label="菜单名称">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <el-input v-model="addForm.img"></el-input>
          </el-form-item>
          <el-form-item label="url路由">
            <el-input v-model="addForm.url"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio v-model="addForm.status" :label="1">启用</el-radio>
            <el-radio v-model="addForm.status" :label="0">禁用</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addSave()">确 定</el-button>
          </span>
      </el-dialog>

      <!--        编辑表单-->
      <el-dialog
          title="编辑表单"
          :visible.sync="editDialogdialogVisible"
          width="30%">
        <el-form ref="form" :model="editForm" label-width="80px">
          <el-form-item label="菜单名称">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="图标">
            <el-input v-model="editForm.img"></el-input>
          </el-form-item>
          <el-form-item label="url路由">
            <el-input v-model="editForm.url"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio v-model="editForm.status" :label="1">启用</el-radio>
            <el-radio v-model="editForm.status" :label="0">禁用</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editSave()">确 定</el-button>
          </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      param: {
        key: '',
        page: 1,
        limit: 10
      },
      total: 0,
      currentPage: 1,
      addDialogdialogVisible: false,
      addForm: {
        name: '',
        img: '',
        url: '',
        status: 1
      },
      editDialogdialogVisible:false,
      editForm: {
        name: '',
        img: '',
        url: '',
        status: 1
      },

    };
  },
  created() {
    this.getList()
  },
  methods:{
    // 查询
    async getList() {
      const {data:res} =await this.$ajax.get('http://124.223.83.80:8082/api/Rule/index',{params:this.param})
      this.tableData = res.data
      this.total = res.total
      // console.log(res);
    },
    //每页多少条
    handleSizeChange(val){
      // console.log(val);
      this.param.limit=val;
      this.getList()
    },
    // 当前页码
    handleCurrentChange(val){
      // console.log(val);
      this.param.page=val;
      this.getList()
    },
    // 删除
    async del(id) {
      const {data: res} = await this.$ajax.get('http://124.223.83.80:8082/api/Rule/delete', {params: {id: id}})
      if (res.code == 200) {
        this.$msg.success(res.msg)
        this.getList()
      } else {
        this.$msg.error(res.msg)
      }
    },
    //前端添加窗口
    add(){
      // 打开Dialog弹框
      this.addDialogdialogVisible=true
    },
    //将add()数据保存到数据库
    async addSave() {
      // 关闭Dialog弹框
      this.addDialogdialogVisible = false
      //发送数据
      const {data:res} =await this.$ajax.post('http://124.223.83.80:8082/api/Rule/add',this.addForm)
      if (res.code == 200) {
        this.$msg.success(res.msg)
        // 重新请求查询
        this.getList()
        // 将数据置空
        this.addForm.name = ''
        this.addForm.status = ''
        this.addForm.img = ''
        this.addForm.url = ''
      }else{
        this.$msg.error(res.msg)
      }
    },
    edit($info) {
      // 打开Dialog弹框
      this.editDialogdialogVisible = true
      //将数据赋值
      this.editForm.id = $info.id
      this.editForm.name = $info.name
      this.editForm.status = $info.status
      this.editForm.img = $info.img
      this.editForm.url = $info.url
    },
    async editSave() {
      // 关闭Dialog弹框
      this.editDialogdialogVisible = false
      //发送数据
      const {data: res} = await this.$ajax.post('http://124.223.83.80:8082/api/Rule/update', this.editForm)
      if (res.code == 200) {
        this.$msg.success(res.msg)
        // 重新请求查询
        this.getList()
        // 将数据置空
        this.addForm.name = ''
        this.addForm.status = ''
        this.addForm.img = ''
        this.addForm.url = ''
        this.addForm.id = ''
      } else {
        this.$msg.error(res.msg)
      }
    },
  },
};
</script>


<style scoped>

</style>